<template>
  <div >
      <div>
        <div class="form">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="菜品图片" prop="image">
              <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :with-credentials="true"
                :http-request="httpRequest"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                file-list=""
                list-type="picture"
                :auto-upload="false">
                <el-button size="small" type="primary" >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="菜品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="菜品类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择菜品类型" style="width: 100%">
                <el-option
                  v-for="item in form.types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜品价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getContent">上架</el-button>
            </el-form-item>

          </el-form>
        </div>


<!--        <button size="primary" type="info" icon="plus" @click="getContent">获取内容</button>-->
      </div>
  </div>
</template>

<script>

  import axios from 'axios';
  import {requestGet, requestPost} from "../../../../network/request";
  export default{
      name: 'hello',
    data(){
        return {
          currentId: '',
          form: {
            image: '',
            name: '',
            price: '',
            type: '',
            types: [{
              value: 'STAPLE',
              label: '主食',
            }, {
              value: 'VEGETABLE',
              label: '素食'
            }, {
              value: 'MEAT',
              label: '荤食'
            },
              {
                value: 'DRINKS',
                label: '饮品'
              }]
          },

          addFormVisible: false
        }
      },
    mounted() {
        //查找目前所在的id
    },
    methods: {
      // param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
      httpRequest(param) {
        let img = param.file; // 相当于input里取得的files
        let fd = new FormData();// FormData 对象
        fd.append('image', img);// 文件对象
        fd.append('dishName',this.form.name);
        fd.append('dishType',this.form.type);
        fd.append('price',this.form.price);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        let url = 'http://localhost:8080/dish/add';
        axios.post(url, fd, config).then(res=>{
          if(res.code===0){
            this.submitForm();//提交表单
          }
        }).then(res=>{
          alert("上传成功");
          this.$router.replace("/content/product");
        })
      },

      //上传成功后显示图片
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        //获取文档内容 上传产品信息 图片在上面的action里面提交
        getContent: function(){
          this.$refs.upload.submit()
        }
      }
  }

</script>
<style>
  .form{
    text-align: center;
    margin: 0 auto;
    width: 50%;
    padding-top: 5%;

  }
</style>
